<template>
    <div>
        <xui-tree-view :data="treeDatas"></xui-tree-view>
        <xui-markdown :text="markdownText"></xui-markdown>        
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

import XuiMarkdown from '/@/components/XUII/markdown.vue'
import XuiTreeView from '/@/components/XUII/tree/index.vue'
import type { TreeNode } from '/@/components/XUII/type'
export default defineComponent({
    components: { XuiMarkdown, XuiTreeView },
    setup(props) {
        let code = `        
        export default defineComponent({
    components: {XuiMarkdown},
    setup(props) {
        let markdownText = "**text**"
        return {
            markdownText
        }
    },
})
        `
        let table = "a | b |c\n-|-|-\n1 | 2 | 3\n4 | 5 | 6"
        let katexText = `$$\\displaystyle \\frac{1}{\\Bigl(\\sqrt{\\phi \\sqrt{5}}-\\phi\\Bigr) e^{\\frac25 \\pi}} = 1+\\frac{e^{-2\\pi}} {1+\\frac{e^{-4\\pi}} {1+\\frac{e^{-6\\pi}} {1+\\frac{e^{-8\\pi}} {1+\\cdots} } } }$$`
        let katex1Text = "```math\n\\displaystyle \\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)\n```"
        let markdownText = "```typescript\n"+code+'\n'+"```\n\n"+table + '\n\n' + katexText + '\n\n'+katex1Text

        let treeDatas:TreeNode[] = [{
            lable: 'a',
            value: 1,
            children: [
                {
                    lable: 'b',
                    value: 2
                }
            ]
        }]
        return {
            markdownText,
            treeDatas
        }
    },
})
</script>